import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/constants.dart';
import 'package:ichinesereader/models/book/BookSearchDto.dart';
import 'package:ichinesereader/models/book/categoryForSeries.dart';
import 'package:ichinesereader/pages/common/recommendedBooks.dart';

class TopicListItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<CategoryForSeries> booktags = [];
    Constants.recommendedTags.forEach(
      (key, value) {
        CategoryForSeries cate = CategoryForSeries();
        cate.image = value;
        cate.text = key;
        booktags.add(cate);
      },
    );

    return Container(
      padding: const EdgeInsets.all(
        5,
      ),
      child: ListView.separated(
        primary: false,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        physics: ScrollPhysics(),
        itemCount: booktags.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 6, vertical: 18),
            child: InkWell(
              onTap: () {
                BookSearchDto bookSearchDto = new BookSearchDto();
                if (booktags[index].text!.contains('&')) {
                  bookSearchDto.query =
                      booktags[index].text!.replaceAll(' ', '').split('&')[0];
                } else {
                  bookSearchDto.query = booktags[index].text;
                }
                // _booksController.searchedBookItems.clear();
                // _booksController.fetchSearchedBookItems(
                //     0, 0, bookSearchDto, 'level');
                Get.to(() => RecommendedBooksPage(
                    title: booktags[index].text.toString(),
                    bookSearchDto: bookSearchDto));
              },
              child: Column(
                children: [
                  Container(
                    width: 150,
                    height: 90,
                    margin: EdgeInsets.only(
                      bottom: 6,
                    ),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(booktags[index].image.toString()),
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(5),
                      ),
                      boxShadow: [
                        BoxShadow(
                          blurRadius: 3,
                          spreadRadius: 1,
                          color: Get.isDarkMode
                              ? Colors.transparent
                              : Colors.black.withOpacity(0.1),
                          offset: Offset(1, 1),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 150,
                    height: 48,
                    margin: EdgeInsets.only(
                      top: 6.0,
                    ),
                    decoration: BoxDecoration(
                      color: Get.isDarkMode
                          ? Color(0xff333333)
                          : Get.theme.primaryColorDark.withOpacity(0.9),
                      borderRadius: BorderRadius.all(
                        Radius.circular(5),
                      ),
                      boxShadow: [
                        BoxShadow(
                          blurRadius: 3,
                          spreadRadius: 1,
                          color: Get.isDarkMode
                              ? Colors.transparent
                              : Colors.black.withOpacity(0.1),
                          offset: Offset(1, 1),
                        ),
                      ],
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      booktags[index].text.toString().tr,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          fontSize: 13,
                          color: Get.isDarkMode
                              ? Color(0xffcccccc)
                              : Get.theme.primaryColorLight),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        separatorBuilder: (context, _) => SizedBox(width: 10),
      ),
    );
  }
}
